<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  
  <title>数据可视化</title>

  <!-- Favicons -->

  <!--external css-->
  <link href="/static/lib/font-awesome/css/font-awesome.css" rel="stylesheet" />
 
  <link rel="stylesheet" type="text/css" href="/static/lib/gritter/css/jquery.gritter.css" />
  <!-- Custom styles for this template -->
  <link href="/static/css/style.css" rel="stylesheet">
  <link href="/static/css/style-responsive.css" rel="stylesheet">
   <script src="/static/lib/jquery/jquery.min.js"></script>
  <script type="text/javascript" src="/static/js/echarts.min.js"></script>
    
  
</head>

<body>
  <section id="container1">
   
    <header class="header black-bg">
      <div class="sidebar-toggle-box">
        <div class="fa fa-bars tooltips" data-placement="right"  data-original-title="Toggle Navigation">
         
        </div>
      </div>
      <!--logo start-->
      <a href="index.html" class="logo"><b>BIG<span>DATA</span></b></a>
     <div class="top-menu">
      <ul class="nav pull-right top-menu">
        <li>
          <a class="login" href="/login">登录</a>
          <a class="register" href="/register">注册</a>
         
        </li>
      </ul>
    </div>
    </header>
   
    <aside>
      <div id="sidebar" class="nav-collapse ">
        <!-- sidebar menu start-->
        <ul class="sidebar-menu" id="nav-accordion">
          <p class="centered"><img src="/static/img/qidi.jpg" class="img-circle" width="80"></p>
          <h5 class="centered">还没想好小组</h5>
          <li class="mt">
            <a class="" href="/index">
              <i class="fa fa-dashboard"></i>
              <span>主页面</span>
              </a>
          </li>
         
          <li class="sub-menu">
            <a class="active" href="javascript:;">
              <i class="active" fa fa-bar-chart-o"></i>
              <span>Charts</span>
              </a>
             <ul class="sub">
        <!-- <li><a href="/">主页面</a></li> -->
              <li><a href="/location">地区分布</a></li>
              <li><a href="/users_count">用户数量统计</a></li>
              <li><a href="/relation">用户关系</a></li>
              <li><a href="/occupation">职业群体分布</a></li>
                <li><a href="/school">教育学校分布</a></li>
              <li><a href="/topic">话题分布</a></li>
              <li><a href="/gender">性别比例分布</a></li>
             
            </ul>
          </li>
         <li class="sub-menu">
            <a class="" href="javascript:;">
              <i class="active" fa fa-bar-chart-o"></i>
              <span>Person</span>
              </a>
             <ul class="sub">
     
              <li><a href="/persion">个人用户画像</a></li>
              </ul>
          </li>

          <li class="sub-menu">
            <a href="javascript:;">
              <i class="fa fa-book"></i>
              <span>其它</span>
              </a>
             <ul class="sub">
              <li><a href="/login">登录</a></li>
              <li><a href="/register">注册</a></li>
              <li><a href="404.html">404 Error</a></li>
              <li><a href="500.html">500 Error</a></li>
            </ul>
          </li>
          
        </ul>
        <!-- sidebar menu end-->
      </div>
    </aside>
    
    <!--main content start-->
    <section id="main-content">
      <section class="wrapper">
        <br>
        <br>
    <!-- Styles -->
<style>

#chartdiv {
  width: 100%;
  height: 600px;
  margin-top: 30px;

}
</style>

<!-- Resources -->
<script src="https://www.amcharts.com/lib/4/core.js"></script>
<script src="https://www.amcharts.com/lib/4/charts.js"></script>
<script src="https://www.amcharts.com/lib/4/themes/animated.js"></script>
<div align="center"><h2>用户之间的关系和弦图</h2></div>
<!-- Chart code -->
<script>
am4core.ready(function() {

// Themes begin
am4core.useTheme(am4themes_animated);
// Themes end

var chart = am4core.create("chartdiv", am4charts.ChordDiagram);

// colors of main characters
chart.colors.saturation = 0.45;
chart.colors.step = 3;
var colors = {
    Rachel:chart.colors.next(),
    Monica:chart.colors.next(),
    Phoebe:chart.colors.next(),
    Ross:chart.colors.next(),
    Joey:chart.colors.next(),
    Chandler:chart.colors.next()
}

// data was provided by: https://www.reddit.com/user/notrudedude

chart.data = [
// node property fields take data from data items where they are first mentioned, that's 
// why we add empty data items at the beginning and set colors here
// {"from":"Monica", "image":"monica.png", "color":colors.Monica},
// {"from":"Rachel", "image":"rachel.png", "color":colors.Rachel},
// {"from":"Chandler", "image":"chandler.png", "color":colors.Chandler},
// {"from":"Ross", "image":"ross.png", "color":colors.Ross},
// {"from":"Joey", "color":colors.Joey, "image":"joey.png",},
// {"from":"Phoebe", "image":"phoebe.png", "color":colors.Phoebe},

// real data

    { from: "Jason LI", to: "娜娜aruna", value: 1 },
    { from: "王瑞恩", to: "Umika Chan", value: 1 },
    { from: "彭宽", to: "李松蔚", value: 1 },
    { from: "grapeot", to: "陈然", value: 1 },
    { from: "绝鹿", to: "李松蔚", value: 1 },
    { from: "太2真人", to: "任易", value: 1 },
    { from: "李松蔚", to: "梁边妖", value: 1 },
    { from: "兰雨", to: "连勋", value: 1 },
    { from: "Panpan", to: "张廿肆", value: 1 },
    { from: "兰雨", to: "战术兔子", value: 1 },
    { from: "真徵羽", to: "王瑞恩", value: 1 },
    { from: "Umika Chan", to: "wwwwodddd", value: 1 },
    { from: "沈辰桓", to: "知乎小管家", value: 1 },
    { from: "女仆2号", to: "王瑞恩", value: 1 },
    { from: "李松蔚", to: "苏德中", value: 1 },
    { from: "薄荷", to: "向日葵人生", value: 1 },
    { from: "兰雨", to: "罗文益", value: 1 },
    { from: "陈然", to: "zero", value: 1 },
    { from: "rui luo", to: "知乎小管家", value: 1 },
    { from: "grapeot", to: "王瑞恩", value: 1 },
    { from: "兰雨", to: "lukehou", value: 1 },
    { from: "Sean Ye", to: "兰雨", value: 1 },
    { from: "张廿肆", to: "采铜", value: 1 },
    { from: "Umika Chan", to: "夏冰莹", value: 1 },
    { from: "陈醉", to: "王瑞恩", value: 1 },
    { from: "绝鹿", to: "任易", value: 1 },
    { from: "何二", to: "采铜", value: 1 },
    { from: "兰雨", to: "陆川", value: 1 },
    { from: "林蔚澜", to: "知乎小管家", value: 1 },
    { from: "连勋", to: "梁边妖", value: 1 },
    { from: "Jason LI", to: "李夭夭", value: 1 },
    { from: "张廿肆", to: "李松蔚", value: 1 },
    { from: "王瑞恩", to: "陈然", value: 1 },
    { from: "yichen", to: "梁边妖", value: 1 },
    { from: "我用真名被嘲笑了", to: "王瑞恩", value: 1 },
    { from: "Sean Ye", to: "太2真人", value: 1 },
    { from: "wwwwodddd", to: "陈然", value: 1 },
    { from: "Umika Chan", to: "苏德中", value: 1 },
    { from: "grapeot", to: "我用真名被嘲笑了", value: 1 },
    { from: "wwwwodddd", to: "Umika Chan", value: 1 },
    { from: "zero", to: "李松蔚", value: 1 },
    { from: "布衣卿", to: "王瑞恩", value: 1 },
    { from: "GQ中国", to: "曾鸣", value: 1 },
    { from: "罗文益", to: "采铜", value: 1 },
    { from: "grapeot", to: "无鹊有雁", value: 1 },
    { from: "Jason LI", to: "Sean Ye", value: 1 },
    { from: "兰雨", to: "摩拜单车", value: 1 },
    { from: "罗妹妹", to: "Epicastle", value: 1 },
    { from: "兰雨", to: "yichen", value: 1 },
    { from: "Jason LI", to: "AlwenLu", value: 1 },
    { from: "我还没想好叫什么", to: "采铜", value: 1 },
    { from: "我还没想好叫什么", to: "王瑞恩", value: 1 },
    { from: "我还没想好叫什么", to: "苏德中", value: 1 },
    { from: "袁滚滚", to: "梁边妖", value: 1 },
    { from: "未央之歌Peking", to: "采铜", value: 1 },
    { from: "无鹊有雁", to: "梁边妖", value: 1 },
    { from: "Umika Chan", to: "李松蔚", value: 1 },
    { from: "zero", to: "Umika Chan", value: 1 },
    { from: "李夭夭", to: "李松蔚", value: 1 },
    { from: "王瑞恩", to: "李松蔚", value: 1 },
    { from: "苏德中", to: "镜阳秋", value: 1 },
    { from: "真徵羽", to: "zero", value: 1 },
    { from: "沈辰桓", to: "蔡安然", value: 1 },
    { from: "战术兔子", to: "林蔚澜", value: 1 },
    { from: "蔚孟宵", to: "兰雨", value: 1 },
    { from: "绝鹿", to: "王晓峰", value: 1 },
    { from: "绝鹿", to: "采铜", value: 1 },
    { from: "李夭夭", to: "梁边妖", value: 1 },
    { from: "太2真人", to: "王瑞恩", value: 1 },
    { from: "黄油油油", to: "梁边妖", value: 1 },
    { from: "grapeot", to: "Panpan", value: 1 },
    { from: "罗文益", to: "梓泉", value: 1 },
    { from: "兰雨", to: "Sean Ye", value: 1 },
    { from: "绝鹿", to: "陈然", value: 1 },
    { from: "陈章鱼", to: "胡辛束", value: 1 },
    { from: "陈醉", to: "李松蔚", value: 1 },
    { from: "布衣卿", to: "梁边妖", value: 1 },
    { from: "罗文益", to: "知乎小管家", value: 1 },
    { from: "为毛", to: "梁边妖", value: 1 },
    { from: "绝鹿", to: "梁边妖", value: 1 },
    { from: "Umika Chan", to: "zero", value: 1 },
    { from: "陈醉", to: "罗妹妹", value: 1 },
    { from: "罗文益", to: "梁边妖", value: 1 },
    { from: "兰雨", to: "好大一头驴", value: 1 },
    { from: "祥和", to: "grapeot", value: 1 },
    { from: "rui luo", to: "zero", value: 1 },
    { from: "Umika Chan", to: "梁边妖", value: 1 },
    { from: "女仆2号", to: "梁边妖", value: 1 },
    { from: "我用真名被嘲笑了", to: "采铜", value: 1 },
    { from: "彭宽", to: "未央之歌Peking", value: 1 },
    { from: "兰雨", to: "陈晔", value: 1 },
    { from: "蔚孟宵", to: "梁边妖", value: 1 },
    { from: "袁滚滚", to: "陈章鱼", value: 1 },
    { from: "任易", to: "李松蔚", value: 1 },
    { from: "Maker毕", to: "罗文益", value: 1 },
    { from: "zero", to: "知乎小管家", value: 1 },
    { from: "陈然", to: "wwwwodddd", value: 1 },
    { from: "AlwenLu", to: "采铜", value: 1 },
    { from: "我用真名被嘲笑了", to: "grapeot", value: 1 },
    { from: "兰雨", to: "林蔚澜", value: 1 },
    { from: "王瑞恩", to: "梁边妖", value: 1 },
    { from: "Jason LI", to: "夏冰莹", value: 1 },
    { from: "蔚孟宵", to: "王瑞恩", value: 1 },
    { from: "Umika Chan", to: "王瑞恩", value: 1 },
    { from: "Jason LI", to: "真徵羽", value: 1 },
    { from: "未央之歌Peking", to: "知乎小管家", value: 1 },
    { from: "小野杰西", to: "丁丁", value: 1 },
    { from: "绝鹿", to: "陈章鱼", value: 1 },
    { from: "曾鸣", to: "陈章鱼", value: 1 },
    { from: "王瑞恩", to: "陈章鱼", value: 1 },
    { from: "豆包", to: "梁边妖", value: 1 },
    { from: "陈章鱼", to: "陆川", value: 1 },
    { from: "grapeot", to: "Maker毕", value: 1 },
    { from: "大元帅", to: "梁边妖", value: 1 },
    { from: "兰雨", to: "Hey狗哥", value: 1 },
    { from: "我用真名被嘲笑了", to: "梓泉", value: 1 },
    { from: "何二", to: "乌梨", value: 1 },
    { from: "grapeot", to: "任易", value: 1 },
    { from: "我用真名被嘲笑了", to: "苏德中", value: 1 },
    { from: "任易", to: "陈章鱼", value: 1 },
    { from: "蔡安然", to: "王晨曦", value: 1 },
    { from: "兰雨", to: "GQ中国", value: 1 },
    { from: "我用真名被嘲笑了", to: "罗文益", value: 1 },
    { from: "Panpan", to: "镜阳秋", value: 1 },
    { from: "罗妹妹", to: "李松蔚", value: 1 },
    { from: "绝鹿", to: "乌梨", value: 1 },
    { from: "我还没想好叫什么", to: "梁边妖", value: 1 },
    { from: "罗文益", to: "Sean Ye", value: 1 },
    { from: "梁边妖", to: "陈然", value: 1 },
    { from: "连勋", to: "王瑞恩", value: 1 },
    { from: "摩拜单车", to: "王晓峰", value: 1 },
    { from: "林淼", to: "知乎小管家", value: 1 },
    { from: "无鹊有雁", to: "陈章鱼", value: 1 },
    { from: "师北宸", to: "蔚孟宵", value: 1 },
    { from: "陈然", to: "Maker毕", value: 1 },
    { from: "Maker毕", to: "陈然", value: 1 },
    { from: "我用真名被嘲笑了", to: "李松蔚", value: 1 },
    { from: "敖御风", to: "陈章鱼", value: 1 },
    { from: "Maker毕", to: "知乎小管家", value: 1 },
    { from: "Rosie", to: "李松蔚", value: 1 },
    { from: "小野杰西", to: "李松蔚", value: 1 },
    { from: "grapeot", to: "张廿肆", value: 1 },
    { from: "zero", to: "夏冰莹", value: 1 },
    { from: "兰雨", to: "师北宸", value: 1 },
    { from: "小爵爷", to: "苏德中", value: 1 },
    { from: "李夭夭", to: "采铜", value: 1 },
    { from: "Sean Ye", to: "罗文益", value: 1 },
    { from: "女仆2号", to: "李松蔚", value: 1 },
    { from: "李夭夭", to: "grapeot", value: 1 },
    { from: "yichen", to: "陈章鱼", value: 1 },
    { from: "蔚孟宵", to: "采铜", value: 1 },
    { from: "我还没想好叫什么", to: "罗文益", value: 1 },
    { from: "苏德中", to: "采铜", value: 1 },
    { from: "Panpan", to: "grapeot", value: 1 },
    { from: "乌梨", to: "梓泉", value: 1 },
    { from: "蔡安然", to: "陈章鱼", value: 1 },
    { from: "真徵羽", to: "梁边妖", value: 1 },
    { from: "我用真名被嘲笑了", to: "梁边妖", value: 1 },
    { from: "Umika Chan", to: "陈章鱼", value: 1 },
    { from: "Sean Ye", to: "Jason LI", value: 1 },
    { from: "grapeot", to: "梁边妖", value: 1 },
    { from: "Umika Chan", to: "陈然", value: 1 },
    { from: "童轻书", to: "知乎小管家", value: 1 },
    { from: "zero", to: "王瑞恩", value: 1 },
    { from: "豆包", to: "王瑞恩", value: 1 },
    { from: "薄荷", to: "梁边妖", value: 1 },
    { from: "Maker毕", to: "王瑞恩", value: 1 },
    { from: "绝鹿", to: "无鹊有雁", value: 1 },
    { from: "霍霍", to: "李松蔚", value: 1 },
    { from: "我还没想好叫什么", to: "李松蔚", value: 1 },
    { from: "Panpan", to: "王瑞恩", value: 1 }]


chart.dataFields.fromName = "from";
chart.dataFields.toName = "to";
chart.dataFields.value = "value";


chart.nodePadding = 0.5;
chart.minNodeSize = 0.01;
chart.startAngle = 80;
chart.endAngle = chart.startAngle + 360;
chart.sortBy = "value";
chart.fontSize = 10;

var nodeTemplate = chart.nodes.template;
nodeTemplate.readerTitle = "Click to show/hide or drag to rearrange";
nodeTemplate.showSystemTooltip = true;
nodeTemplate.propertyFields.fill = "color";
nodeTemplate.tooltipText = "{name}'s kisses: {total}";

// when rolled over the node, make all the links rolled-over
nodeTemplate.events.on("over", function(event) {    
    var node = event.target;
    node.outgoingDataItems.each(function(dataItem) {
        if(dataItem.toNode){
            dataItem.link.isHover = true;
            dataItem.toNode.label.isHover = true;
        }
    })
    node.incomingDataItems.each(function(dataItem) {
        if(dataItem.fromNode){
            dataItem.link.isHover = true;
            dataItem.fromNode.label.isHover = true;
        }
    }) 

    node.label.isHover = true;   
})

// when rolled out from the node, make all the links rolled-out
nodeTemplate.events.on("out", function(event) {
    var node = event.target;
    node.outgoingDataItems.each(function(dataItem) {        
        if(dataItem.toNode){
            dataItem.link.isHover = false;                
            dataItem.toNode.label.isHover = false;
        }
    })
    node.incomingDataItems.each(function(dataItem) {
        if(dataItem.fromNode){
            dataItem.link.isHover = false;
           dataItem.fromNode.label.isHover = false;
        }
    })

    node.label.isHover = false;
})

var label = nodeTemplate.label;
label.relativeRotation = 90;

label.fillOpacity = 0.4;
let labelHS = label.states.create("hover");
labelHS.properties.fillOpacity = 1;

nodeTemplate.cursorOverStyle = am4core.MouseCursorStyle.pointer;
// this adapter makes non-main character nodes to be filled with color of the main character which he/she kissed most
nodeTemplate.adapter.add("fill", function(fill, target) {
    let node = target;
    let counters = {};
    let mainChar = false;
    node.incomingDataItems.each(function(dataItem) {
        if(colors[dataItem.toName]){
            mainChar = true;
        }

        if(isNaN(counters[dataItem.fromName])){
            counters[dataItem.fromName] = dataItem.value;
        }
        else{
            counters[dataItem.fromName] += dataItem.value;
        }
    })
    if(mainChar){
        return fill;
    }

    let count = 0;
    let color;
    let biggest = 0;
    let biggestName;

    for(var name in counters){
        if(counters[name] > biggest){
            biggestName = name;
            biggest = counters[name]; 
        }        
    }
    if(colors[biggestName]){
        fill = colors[biggestName];
    }
  
    return fill;
})

// link template
var linkTemplate = chart.links.template;
linkTemplate.strokeOpacity = 0;
linkTemplate.fillOpacity = 0.15;
linkTemplate.tooltipText = "{fromName} & {toName}:{value.value}";

var hoverState = linkTemplate.states.create("hover");
hoverState.properties.fillOpacity = 0.7;
hoverState.properties.strokeOpacity = 0.7;

// data credit label
var creditLabel = chart.chartContainer.createChild(am4core.TextLink);
// creditLabel.text = "Data source: notrudedude";
// creditLabel.url = "https://www.reddit.com/user/notrudedude";
creditLabel.y = am4core.percent(99);
creditLabel.x = am4core.percent(99);
creditLabel.horizontalCenter = "right";
creditLabel.verticalCenter = "bottom";

var titleImage = chart.chartContainer.createChild(am4core.Image);
titleImage.href = "//www.amcharts.com/wp-content/uploads/2018/11/whokissed.png";
titleImage.x = 30
titleImage.y = 30;
titleImage.width = 200;
titleImage.height = 200;

}); // end am4core.ready()
</script>

<!-- HTML -->
<div id="chartdiv"></div>
<br>
<br>
      </section>
    </section>
    <!--main content end-->
    <!--footer start-->
    <footer class="site-footer">
      <div class="text-center">
        <p align="center">
          &copy;<strong>Big data</strong>&nbsp;&nbsp;.&nbsp;&nbsp;还没想好小组
        </p>
       
        <a href="/relation" class="go-top">
          <i class="fa fa-angle-up"></i>
          </a>
      </div>
    </footer>
    <!--footer end-->
  </section>
  <!-- js placed at the end of the document so the pages load faster -->
 

  <script src="/static/lib/bootstrap/js/bootstrap.min.js"></script>
  <script class="include" type="text/javascript" src="/static/lib/jquery.dcjqaccordion.2.7.js"></script>
  <script src="/static/lib/jquery.scrollTo.min.js"></script>
  <script src="/static/lib/jquery.nicescroll.js" type="text/javascript"></script>
  <!-- <script src="/static/lib/jquery.sparkline.js"></script> -->
  <!--common script for all pages-->
  <script src="/static/lib/common-scripts.js"></script>
  <script type="text/javascript" src="/static/lib/gritter/js/jquery.gritter.js"></script>
  <script type="text/javascript" src="/static/lib/gritter-conf.js"></script>
  <!--script for this page-->
 

 
 
</body>

</html>
